<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择工单</title>
  <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/common.css"/>
  <link rel="stylesheet" href="../css/page_css/work_order_sel_order.css">
  <link rel="stylesheet" href="../css/page_css/util.css">
  <style>
    .mui-table-view:before{
      background-color: transparent !important;
    }
  </style>
</head>
<body>
  <div class="mui-content">
    <ul class="mui-table-view01">
			 <li class="search-cell">
			 	<div class="mui-input-row mui-search">
					<input type="search" id="searchText" class="mui-input-clear" placeholder="请输入工单号" ><span class="mui-icon mui-icon-clear mui-hidden"></span><span class="mui-placeholder"><span></span></span>
				</div>
				<div class="mui-btn mui-btn-primary" onclick="Search()">
					搜索
				</div>
			 </li>
		</ul>
    <ul class="mui-table-view" id="mui-table-view">
      <!-- 模板引擎 -->
    </ul>
  </div>
  <script type="text/javascript" src="../script/api.js"></script>
  <script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
  <script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/template" id="tmpList">
    {{each datas as item}}
      <li class="mui-table-view-cell mui-radio mui-left">
        <input name="sel_ads_radio" style="top:17px" type="radio" onchange="chooseOrder('{{item.wonum}}','{{item.status}}','{{item.location}}','{{item.wonum}}')">
        <div class="mui-table-view margin_10">
          <div class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">
              <div class="flex_center_between">
                <p>工单: {{item.wonum}}</p>
              </div>
            </a>
            <div class="mui-collapse-content no_padding_r">
              <p class="height_auto border_b_1">负责人: {{item.leadname}}</p>
              <p class="height_auto border_b_1">描述:{{item.description}}</p>
              <p class="height_auto border_b_1">位置:{{item.location}}</p>
              <p class="height_auto border_b_1">资产:{{item.assetnum}}</p>
              <p class="height_auto border_b_1">状态:{{item.status}}</p>
            </div>
          </div>
        </div>
      </li>
    {{/each}}
  </script>
  <script>
    var searchText;
    var loadEnd = false;
    var page = 1;
    var selOrderId,selOrderStatus,selOrderAddress,wonum;
    apiready = function(){
      onLoadData(page,false)
      scrollToBottomHandler(function() {
        if (!loadEnd) { // 未到最后一页
          page++;
          onLoadData(page,true);
        } else { // 告诉到底了
          EndToast('到底了');
        }
      })
      Refresh(function() {
        loadEnd = false;
        page = 1;
        onLoadData(page,false);
      });
      api.addEventListener({
        name:'navitembtn'
      },function(ret, err){
          if(ret.type == 'right'){
            if($api.dom("input[type='radio']:checked") == null){
              api.toast({
                msg: '请选择一项!',
                duration: 2000,
                location: 'middle'
              });
              return false
            }
            api.sendEvent({
              name: 'selOrder',
              extra: {
                selOrderId : selOrderId,
                selOrderStatus : selOrderStatus,
                selOrderAddress : selOrderAddress,
                wonum : wonum
              }
            });
            setTimeout(function(){
              api.closeWin();
            },100)
          }
      })
    }
   function onLoadData(page,load){
    ajaxrd("selectWorkorderList",{
      location:api.pageParam.address,
      wonum: $api.val($api.byId('searchText')),
      pageNo: page,
      pageSize: 10
    },function(data){
      AddData('tmpList','mui-table-view', data.list, load);
    })
   }
   function chooseOrder(id, status, location, wonumVal ) {
     selOrderId = id
     selOrderStatus = status,
     selOrderAddress = location,
     wonum = wonumVal
   }
</script>
</body>
</html>
